<template>
  <div>
    <div class="top">
      <el-dropdown trigger="click" @command="handleCommand">
        <el-button
          type="primary"
          style="height: 30px; padding: 0 15px; border-radius: 3px"
          >新增</el-button
        >
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in ValidataMenuList"
            :key="item.value"
            :command="item.value"
            >{{ item.text }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table
      v-loading="loading"
      :data="tableList"
      style="width: 100%"
      border
      height="400px"
      id="table"
      ref="table"
      :header-cell-style="{
        background: '#f5f5f5',
        'text-align': 'center',
      }"
    >
      <template slot="empty">
        <el-empty description="暂无数据"></el-empty>
      </template>
      <el-table-column prop="validatorType" align="center" width="200px" label="校验类型">
        <template slot-scope="scope">
          {{
            ValidataMenuList.find((i) => i.value == scope.row.validatorType)
              ?.text
          }}
        </template>
      </el-table-column>
      <el-table-column prop="validatorName" label="验证内容"> </el-table-column>
      <el-table-column align="center" width="100px" label="操作">
        <template slot-scope="scope">
          <div class="table-cz">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-edit"
                @click="edit(scope.row)"
              ></i
            ></el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <i
                style="font-size: 14px; color: red; cursor: pointer"
                class="el-icon-delete"
                @click="del(scope.row)"
              ></i
            ></el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <nt-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="500px"
      @diaClose="diaClose"
    >
      <nt-form
        @submit="submit"
        @diaClose="diaClose"
        :FormList="FormList"
        :defData="defData"
      ></nt-form>
    </nt-dialog>
  </div>
</template>

<script>
import {
  addCustomValidatorApi,
  addGeneralValidatorApi,
  delViewvalidatorApi,
  editCustomValidatorApi,
  editGeneralValidatorApi,
  getValidataMenuApi,
  getValidatorDataApi,
  getValidatorListApi
} from '@/api/Device-all/Device-view'
import ntDialog from '@/components/nt-dialog.vue'
import NtForm from '@/components/nt-form'
import { InternalValidator, CustomValidator } from './ValidataOptions'
export default {
  components: { ntDialog, NtForm },
  props: ['ValidData'],
  data () {
    return {
      status: 'add',
      defData: {},
      type: '',
      loading: false,
      tableList: [],
      ValidataMenuList: [],
      dialogVisible: false,
      FormList: []
    }
  },
  created () {
    this.getEventMenu()
    this.getValidatorList()
  },
  methods: {
    // 获取事件子菜单列表
    async getEventMenu () {
      const res = await getValidataMenuApi()
      this.ValidataMenuList = res.data.list
    },
    // 查询视图组件校验列表
    async getValidatorList () {
      this.loading = true
      const res = await getValidatorListApi(this.ValidData?.componentId)
      this.tableList = res.data.list
      this.loading = false
    },
    // 查询视图组件校验信息
    async getValidatorData (id) {
      const res = await getValidatorDataApi(id)
      this.defData = res.data.entity
    },
    handleCommand (command) {
      this.status = 'add'
      this.detectEvent(command)
      this.dialogVisible = true
    },
    // 保存
    async submit (item) {
      const data = { componentId: this.ValidData.componentId, ...item }
      if (this.status === 'add') {
        const res =
          this.type === 'InternalValidator'
            ? await addGeneralValidatorApi(data)
            : this.type === 'CustomValidator'
              ? await addCustomValidatorApi(data)
              : ''
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message,
            duration: 2000
          })
          this.diaClose()
          this.getValidatorList()
        } else {
          this.$message({
            type: 'error',
            message: res.message,
            duration: 2000
          })
        }
      } else {
        const res =
          this.type === 'InternalValidator'
            ? await editGeneralValidatorApi(data)
            : this.type === 'CustomValidator'
              ? await editCustomValidatorApi(data)
              : ''
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message,
            duration: 2000
          })
          this.diaClose()
          this.getValidatorList()
        } else {
          this.$message({
            type: 'error',
            message: res.message,
            duration: 2000
          })
        }
      }
    },
    // 判断当前事件
    detectEvent (event) {
      this.type = event
      if (event === 'InternalValidator') {
        this.FormList = InternalValidator
      } else if (event === 'CustomValidator') {
        this.FormList = CustomValidator
      } else {
        this.FormList = []
      }
    },
    // 编辑
    async edit (item) {
      this.status = 'edit'
      console.log(item)
      await this.getValidatorData(item.validatorId)
      await this.detectEvent(item.validatorType)
      this.dialogVisible = true
    },
    // 删除
    async del (item) {
      this.$confirm('此操作将删除该视图组件校验, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const res = await delViewvalidatorApi(item.validatorId)
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.message,
                duration: 2000
              })
              this.getValidatorList()
            } else {
              this.$message({
                type: 'error',
                message: res.message,
                duration: 2000
              })
            }
          } catch (e) {
            console.log(e)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    diaClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.table-cz {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
